<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="商户编号">
                <a-input v-model="queryParam.searchId" placeholder="请输入商户号/终端号"/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="订单编号">
                <a-input v-model="queryParam.leapmotorOrderId" placeholder="订单编号"/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="创建日期：">
                <a-range-picker format="YYYY-MM-DD" @change="pickerChange"/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              </span>
            </a-col>
            <a-col :span="24">
              <a-divider dashed />
            </a-col>
            <a-col :span="24" class="col">
              <span>开票状态：</span>
              <div>
                <a-checkable-tag v-for="(i,index) in invoiceStatusArray" :checked="queryParam.status == i.value" :key="index" @change="queryParam.status = i.value;$refs.table.refresh(true)">
                  {{ i.test }}
                </a-checkable-tag>
              </div>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <s-table
        style="margin-top: 24px"
        row-key="leapmotorOrderId"
        :columns="goodsColumns"
        :data="loadGoodsData"
        ref="table"
        :pagination="{
          showQuickJumper:true,
          pageSizeOptions: ['5', '10', '20', '30', '40'],
          showTotal:(total,range)=>{
            return `共 (${total}) 条记录 第 ${pageNo} / ${totalPage} 页`
          }
        }"
      >
        <span slot="statusName" slot-scope="row">
          <template>
            <a-badge :color="row.status | icStatusTypeFilter" :text="row.status | statusName" />
          </template>
        </span>

        <span slot="handle" slot-scope="icStatus,record">
          <template>
            <router-link :to="`/order/record/${record.leapmotorOrderId}`">
              <!-- <a-icon type="edit" /> -->
              <div>查看</div>
            </router-link>
          </template>
        </span>
      </s-table>
    </a-card>

  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { listOrder } from '@/api/common'
const invoiceStatusArray = [
  {
    value: undefined,
    status: false,
    test: '不限'
  },
  {
    value: '0',
    status: 'purple',
    test: '待支付'
  },
  {
    value: '1',
    status: '#d9d9d9',
    test: '支付中断'
  },
  {
    value: '4',
    status: 'orange',
    test: '支付异常'
  },
  {
    value: '2',
    status: 'green',
    test: '支付成功'
  },
  {
    value: '3',
    status: 'red',
    test: '支付失败'
  }
]
export default {
  components: {
    STable
  },
  data () {
    return {
      // 查询参数
      queryParam: {
        leapmotorOrderId: '',
        searchId: '',
        startDate: '',
        endDate: '',
        status: undefined
      },
      // 交易状态
      invoiceStatusArray,
      reqData: {
        invoiceStatus: null // 开票请求状态
      },
      totalPage: 1, // 总页码
      pageNo: 1, // 当前页码
      goodsColumns: [
        {
          title: '订单编号',
          dataIndex: 'leapmotorOrderId',
          key: 'leapmotorOrderId',
          align: 'center'
        },
        {
          title: '商户号',
          dataIndex: 'merchantId',
          key: 'merchantId',
          align: 'center'
        },
        {
          title: '单据编号',
          dataIndex: 'leapmotorReceiptNo',
          key: 'leapmotorReceiptNo',
          align: 'center'
        },
        {
          title: '单据类型',
          dataIndex: 'leapmotorReceiptType',
          key: 'leapmotorReceiptType',
          align: 'center'
        },
        {
          title: 'POS终端号',
          dataIndex: 'terminalId',
          key: 'terminalId',
          align: 'center'
        },
        {
          title: '操作员编号',
          dataIndex: 'operatorNo',
          key: 'operatorNo',
          align: 'center'
        },
        {
          title: '收款金额',
          dataIndex: 'amount',
          key: 'amount',
          align: 'center'
        },
        {
          title: '支付状态',
          // dataIndex: 'status',
          // key: 'status',
          align: 'center',
          scopedSlots: { customRender: 'statusName' }
        },
        {
          title: '交易时间',
          dataIndex: 'transTime',
          key: 'transTime',
          align: 'center'
        },
        {
          title: '支付记录',
          scopedSlots: { customRender: 'handle' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadGoodsData: (parameter) => {
        const reqData = {
          pageNum: parameter.pageNo, // 页数
          pageSize: parameter.pageSize, // 条数
          ...this.queryParam
        }
        for (const i in reqData) {
          if (!reqData[i]) {
            delete reqData[i]
          }
        }
        return listOrder(reqData).then(res => {
          if (res.status === 'S000') {
            return ({
              data: res.data.list,
              pageSize: 10,
              pageNo: parameter.pageNo,
              totalPage: 1,
              totalCount: res.data.total
            })
          } else {
            this.$notification.error({
              message: '错误',
              description: res.msg
            })
            return ({
              data: [],
              pageSize: 10,
              pageNo: 1,
              totalPage: 1,
              totalCount: 0
            })
          }
        })
      }
    }
  },
  filters: {
    statusName (status) {
      const statusName = invoiceStatusArray.find(item => item.value === ('' + status)).test
      return statusName
    },
    icStatusTypeFilter (status) {
      const statusName = invoiceStatusArray.find(item => item.value === ('' + status)).status
      return statusName
    }
  },
  methods: {
    pickerChange (event, date) {
      this.queryParam.startDate = date[0]
      this.queryParam.endDate = date[1]
      // this.$refs.table.refresh(true)
    }
  }
}
</script>
<style lang="less" scoped>
.table-page-search-wrapper {

  background: #fff;
  .col {
    display: flex;
    line-height: 32px;
    margin: 10px 0;
    span {
      color: rgba(0, 0, 0, 0.85);
    }
  }
  .risk-font {
    color: rgba(127, 127, 127, 0.65);
  }
}
/deep/ .ant-divider-horizontal {
  margin: 6px 0;
}
</style>
